<template>
  <el-drawer
    :title="title"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="50%"
    :wrapper-closable="false"
  >
    <el-divider />
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form ref="form" label-position="top" :model="queryData" :rules="rules">
        <el-row type="flex">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="queryData.name" placeholder="请输入" style="width: 350px" size="small" />
          </el-form-item>
          <el-form-item
            label="角色描述"
            style="width: 350px; margin-left: 30px"
            prop="description"
          >
            <el-input v-model="queryData.description" autocomplete="off" size="small" placeholder="请输入" />
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="state">
          <el-form-item>
            <!-- 提示语 -->
            <el-tooltip class="item" effect="dark" content="角色关联的菜单和按钮权限信息" placement="top-start">
              <i
                class="el-icon-warning-outline"
              />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="权限标识">
            <el-tree
              ref="tree"
              v-loading="loading"
              :data="list"
              node-key="id"
              :props="{ label: 'title'}"
              show-checkbox
            />
          </el-form-item>
          <el-form-item label="启用状态" style="margin-left:312px">
            <el-radio v-model="queryData.status" :label="0">禁用</el-radio>
            <el-radio v-model="queryData.status" :label="1">启用</el-radio>
          </el-form-item>
        </el-row>
      </el-form>
      <el-divider />
      <div class="demo-drawer__footer">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { getAuthManuApi } from '@/api/auth/menu'
import { tellListToTreeData } from '@/utils/index'
import { addRoleApi, getRoleDetailApi, editRoleApi } from '@/api/auth/role'
export default {
  name: 'MenuDialog',
  data() {
    return {
      drawer: false,
      list: [],
      // 请求参数
      queryData: {
        description: '',
        name: '',
        status: 1
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  computed: {
    title() {
      return this.queryData.id ? '编辑角色' : '新增角色'
    }
  },
  methods: {
    handleClose() {
      this.drawer = false
      this.queryData = {
        description: '',
        menus: [],
        name: '',
        status: 1
      }
      this.$refs.form.resetFields()
      this.$refs.tree.setCheckedKeys([])
    },
    // 新增弹框获取权限数据
    async getMenuList() {
      const { data: res } = await getAuthManuApi()
      this.list = tellListToTreeData(res, 0)
    },
    // 新增角色
    async btnOK() {
      // todo 通过this.$refs.tree.getCheckedNodes去获取选中的数据，接收两个参数，
      // todo 1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      const menus = this.$refs.tree.getCheckedNodes(false, true)
      // console.log(this.$refs.tree.getCheckedNodes(false, true), 'node获取数据')
      // console.log(menus, 'node 获取')
      // todo 遍历menus将id拿到
      const newArr = menus.map(item => {
        return +item.id
      })
      // console.log(newArr)
      // 表单验证
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return this.$message.error('验证不通过')
      }
      // 判断是否存在id,存在id就证明是修改
      if (this.queryData.id) {
        await editRoleApi({ ...this.queryData, menus: newArr })
        this.$message.success('角色修改成功')
      } else {
        await addRoleApi({ ...this.queryData, menus: newArr })
        this.$message.success('角色添加成功')
      }
      this.handleClose()
      this.$emit('updata')
    },
    // 获取用户角色详情回显
    async getRoleDetail(id) {
      this.drawer = true
      this.loading = true
      // 调用渲染权限方法
      this.getMenuList()
      const { data: res } = await getRoleDetailApi(id)
      this.queryData = res
      if (res.menus === '*') {
        const arr = res.menuList.map(item => {
          return +item.id
        })
        this.$refs.tree.setCheckedKeys(arr)
        this.loading = false
      } else {
        // 渲染完成后通过 this.$refs.tree.setCheckedKeys 设置已有权限
        // 通过map遍历 res.menuList 返回一个新的数字数组
        const newMenusArr = res.menuList.map(item => +item.id)
        // console.log(newMenusArr)
        // console.log([...newMenusArr])
        // this.$refs.tree.setCheckedKeys(newMenusArr)
        newMenusArr.map(item => {
          const test = this.$refs.tree.getNode(item)
          // console.log(test)
          if (test.isLeaf) {
            this.$refs.tree.setChecked(item, true)
          }
        })
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.quillEditor {
  line-height: normal;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 550px;
  overflow: scroll;
  overflow-x: hidden;
}
::v-deep .ql-container {
  height: 100px;
}
.demo-drawer__footer {
  float: right;
  margin-right: 30px;
  margin-top: 20px;
}
.el-divider {
  margin: 0;
}

// ::v-deep .el-tooltip {
//   position: absolute;
//   top: 178px;
//   left: 80px;
// }
</style>
